<template>
  <el-dialog v-model="outerVisible" title="" width="80%" :before-close="reset">
    <div v-if="props.type === 2">
      视频 【{{ props.title }}】 你还未购买，是否购买该视频，需花费 【{{
        golds
      }}】 金币
    </div>
    <div v-if="props.type === 1">你当前还不是会员，是否前往充值会员</div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="reset">取消</el-button>
        <el-button type="primary" @click="onSubmit" v-if="props.type === 2">
          购买
        </el-button>
        <el-button type="primary" @click="toBuy" v-else> 购买 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, defineExpose, defineEmits, defineProps } from "vue";
import { useRouter } from "vue-router";

const emits = defineEmits(["buy", "close"]);
const props = defineProps({
  title: {
    type: String,
    default: "未知",
  },
  type: {
    type: Number,
    default: 0,
  },
});
const router = useRouter();
const outerVisible = ref(false);
const golds = ref(0);

const onSubmit = () => {
  emits("buy");
  emits("close");
  outerVisible.value = false;
};

const open = (gold) => {
  outerVisible.value = true;
  golds.value = gold;
};

const toBuy = () => {
  router.push("/center");
};

const reset = () => {
  golds.value = 0;
  outerVisible.value = false;
  emits("close");
};

defineExpose({
  open,
});
</script>

<style scoped>
.el-overlay-dialog {
  z-index: 999;
}
</style>
